<template>
  <div class="dashboard-editor-container">
    <!-- <head-top></head-top> -->
    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader
          class="region"
          v-model="value"
          placeholder="选择店铺分组"
          :options="cascadeList"
          :props="{ checkStrictly: true }"
          @change="handleChange"
          style="width: 300px; height: 30px"
        >
        </el-cascader>
      </el-col>
      <el-col :span="12" style="background-color: #f5f5f5; height: 30px">
        <nav id="navbar">
          <!-- <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">商品排行</a>
            </li>
            <li :class="{ active: isActiveSection(5) }">
              <a href="#section5" @click="scrollToSection(5)">库存分析</a>
            </li>
            <li :class="{ active: isActiveSection(6) }">
              <a href="#section6" @click="scrollToSection(6)">地区排行</a>
            </li>
          </ul> -->
        </nav>
      </el-col>
      <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->
    </el-row>

    <section id="section1">
      <!-- <header class="section_title">数据统计</header> -->
      <!-- <el-row :gutter="20" style="margin-bottom: 10px">
        <el-col :span="4"
          ><div class="data_list today_head">
            <span class="data_num head">当日数据：</span>
          </div></el-col
        >
        <el-col :span="4"
          ><div class="data_list">
            <span class="data_num">{{ userCount }}</span> 新增用户
          </div></el-col
        >
        <el-col :span="4"
          ><div class="data_list">
            <span class="data_num">{{ orderCount }}</span> 新增订单
          </div></el-col
        >
        <el-col :span="4"
          ><div class="data_list">
            <span class="data_num">{{ adminCount }}</span> 新增管理员
          </div></el-col
        >
      </el-row> -->
      <el-row :gutter="20" class="data_section">
        <el-col :span="4">
          <!-- <div class="data_list all_head"> -->
          <!-- <span class="data_num head">总数据：</span> -->
          <!--pjtUrl + itemData.picUrl  -->
          <image-preview
            :src="itemData.picFullUrl"
            alt=""
            style="width: 100%; height: 300px; object-fit: cover"
          />
          <!-- v-if="itemData.picFullUrl"
          <image-preview
            v-else
            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
            alt=""
            style="width: 100%; height: 300px; object-fit: cover"
          /> -->

          <!-- </div> -->
        </el-col>
        <el-col :span="20">
          <!-- <el-row> -->
          <div style="margin-bottom: 30px">
            <!-- {{ pjtUrl + itemData.picUrl }}-->
            <!-- {{ itemData.picFullUrl }} -->
            <span
              >款号：<el-select
                v-model="productNo"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                placeholder="请输入"
                @change="testAdd"
                style="width: 150px"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option> </el-select
            ></span>
          </div>

          <panel-group
            @handleSetLineChartData="handleSetLineChartData"
            :itemData="itemData"
          />

          <!-- <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.salesAmount ? itemData.salesAmount : "未更新"
                }}</span
              >
              销售金额
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.returnAmount ? itemData.returnAmount : "未更新"
                }}</span
              >
              退款金额
            </div></el-col
          >
          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.netSalesAmount ? itemData.netSalesAmount : "未更新"
                }}</span
              >
              净销售额
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.comprehensiveReturnRate
                    ? itemData.comprehensiveReturnRate
                    : "未更新"
                }}</span
              >
              综合退货率
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.totalSalesNumber
                    ? itemData.totalSalesNumber
                    : "未更新"
                }}</span
              >
              总销售件数
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.netSalesNumber ? itemData.netSalesNumber : "未更新"
                }}</span
              >
              净销售件数
            </div></el-col
          >
          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.grossProfit ? itemData.grossProfit : "未更新"
                }}</span
              >
              毛利额
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.grossProfitRate ? itemData.grossProfitRate : "未更新"
                }}</span
              >
              毛利率
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.returnBeforeShipmentNumber
                    ? itemData.returnBeforeShipmentNumber
                    : "未更新"
                }}</span
              >
              发货前退货数
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.returnAfterShipmentNumber
                    ? itemData.returnAfterShipmentNumber
                    : "未更新"
                }}</span
              >
              发货后退货数
            </div></el-col
          >
          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.totalReturnNumber
                    ? itemData.totalReturnNumber
                    : "未更新"
                }}</span
              >
              总退货件数
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.endingInventory ? itemData.endingInventory : "未更新"
                }}</span
              >
              库存
            </div></el-col
          >
          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.salesGrossProfit
                    ? itemData.salesGrossProfit
                    : "未更新"
                }}</span
              >
              采购在途
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{ itemData.sdNumber ? itemData.sdNumber : "未更新" }}</span
              >
              SD单件数
            </div></el-col
          >
          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{ itemData.mjxNumber ? itemData.mjxNumber : "未更新" }}</span
              >
              MJX单件数
            </div></el-col
          >

          <el-col :span="4"
            ><div class="data_list">
              <span class="data_num">
                {{
                  itemData.exhaustionRate ? itemData.exhaustionRate : "未更新"
                }}</span
              >
              售罄率
            </div></el-col
          > -->
          <!-- </el-row> -->
        </el-col>
      </el-row>
      <el-row style="background: #fff; padding: 32px 32px; margin-bottom: 32px">
        <chartData :chart-data="echartDataI" />
      </el-row>
    </section>
    <section id="section2">
      <!-- margin-bottom: 32px  -->
      <el-row :gutter="10" style="background: #fff; padding: 16px 16px">
        <el-col :span="12">
          <!-- style="height: calc(100vh - 500px)" -->
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-collection"></i> skc分析</span>
              <!-- <el-select
                v-model="productView"
                placeholder="产品视角"
                clearable
                @change="changeView"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_view.slice(0, 3)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select> -->
            </div>
            <!-- :height="pageHeight" @cell-click="tableEdit"-->
            <div ref="tableDom">
              <el-table
                :maxHeight="skcitemData.length ? tableHeight : 'auto'"
                :data="skcitemData"
                :height="pageHeight"
                highlight-current-row
                style="width: 100%"
                @cell-click="tableEdit"
              >
                <!-- <el-table-column
                  width="60"
                  label="排名"
                  type="index"
                ></el-table-column>
                <el-table-column
                  width="60"
                  label="产品图"
                  align="center"
                  prop="picUrl"
                  ><template slot-scope="scope">
                    <el-popover
                      effect="light"
                      trigger="click"
                      placement="left"
                      width="auto"
                      v-show="scope.row.picUrl"
                    >
                      <template #default>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="
                            width: 800px;
                            height: 600px;
                            object-fit: contain;
                          "
                        />
                      </template>
                      <template #reference>
                        <img
                          :src="pjtUrl + scope.row.picUrl"
                          style="width: 20px; height: 20px; object-fit: contain"
                        />
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  width="140"
                  label="颗粒度"
                  align="center"
                  prop="itemGrade"
                >
                  <template slot-scope="scope">
                    <div
                      v-if="productView == 'item'"
                      style="
                        color: rgb(37, 137, 255);
                        cursor: pointer;
                        text-decoration: underline;
                      "
                      @click="gotoSku(scope.row)"
                    >
                      {{ scope.row.itemGrade }}
                    </div>
                    <span v-else>{{ scope.row.itemGrade }}</span>
                   
                  </template>
                </el-table-column> -->
                <el-table-column
                  width="110"
                  label="spu"
                  align="center"
                  prop="spu"
                ></el-table-column>
                <el-table-column
                  width="125"
                  label="skc"
                  align="center"
                  prop="skc"
                ></el-table-column>
                <el-table-column
                  width="90"
                  label="颜色"
                  align="center"
                  prop="colorProperty"
                />
                <el-table-column
                  width="90"
                  label="库存"
                  align="center"
                  prop="endingInventory"
                />
                <el-table-column
                  width="90"
                  label="采购在途"
                  align="center"
                  prop="salesGrossProfit"
                />
                <el-table-column
                  width="90"
                  label="销量"
                  align="center"
                  prop="netSalesNumber"
                />
                <el-table-column
                  width="90"
                  label="净销售额"
                  align="center"
                  prop="netSalesAmount"
                ></el-table-column>
                <el-table-column
                  width="90"
                  label="可售天数"
                  align="center"
                  prop="saleDays"
                ></el-table-column>
              </el-table>
            </div>
            <!-- <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="handleChange"
            /> -->
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div
              slot="header"
              style="display: flex; justify-content: space-between"
            >
              <span><i class="el-icon-pie-chart"></i> 颜色库销比</span>
              <el-button type="primary" @click="selectAll"
                >查看完整数据</el-button
              >
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MixChart
                :id="'MixChart'"
                :chartData="echartData"
                @SetLineChartData="SetLineChartData"
                height="100%"
                width="100%"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section2">
      <!-- margin-bottom: 32px-->
      <el-row :gutter="10" style="background: #fff; padding: 20px 16px 0">
        <el-col :span="12">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 颜色分析</span>
            </div>
            <el-table
              :data="skuitemData"
              :height="pageHeight"
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                width="110"
                label="spu"
                align="center"
                prop="spu"
              ></el-table-column>
              <!-- <el-table-column
                width="120"
                label="skc"
                align="center"
                prop="skc"
              ></el-table-column> -->
              <el-table-column
                width="110"
                label="颜色"
                align="center"
                prop="colorProperty"
              />
              <el-table-column
                width="110"
                label="尺码 "
                align="center"
                prop="proSize"
              ></el-table-column>
              <el-table-column
                width="90"
                label="库存"
                align="center"
                prop="endingInventory"
              />
              <el-table-column
                width="90"
                label="采购在途"
                align="center"
                prop="salesGrossProfit"
              />
              <el-table-column
                width="90"
                label="销量"
                align="center"
                prop="netSalesNumber"
              />
              <el-table-column
                width="90"
                label="净销售额"
                align="center"
                prop="netSalesAmount"
              ></el-table-column>
              <el-table-column
                width="90"
                label="可售天数"
                align="center"
                prop="saleDays"
              ></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-pie-chart"></i> 尺码库销比</span>
            </div>
            <div
              class="el-table el-table--enable-row-hover el-table--medium chart-container"
            >
              <MinChart
                :id="'MinChart'"
                :minchartData="echartDataMin"
                height="100%"
                width="100%"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
    <!-- 添加或修改产品一级信息对话框  @close="handleClose"-->
    <el-dialog
      :visible.sync="open"
      width="95%"
      height="100%"
      append-to-body
      v-if="open"
      @close="handleClose"
    >
      <div class="el-dialog-div">
        <MixChart
          :id="'MixAllChart'"
          :chartData="echartData"
          @SetLineChartData="SetLineChartData"
          :height="'50%'"
          :width="'100%'"
        />
        <MinChart
          :id="'MinAllChart'"
          :minchartData="echartDataMin"
          :height="'50%'"
          :width="'100%'"
        />
      </div>
    </el-dialog>
    <!-- <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import date from "./day/date.vue";
import chartDataI from "./components/chartDataI";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import {
  listAll,
  getBrandChannelShop,
  delBrandChannelShop,
  addBrandChannelShop,
  updateBrandChannelShop,
} from "@/api/chart/brandChannelShop";

import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
} from "@/api/sku/sku";
// src\views\example\Charts\MixChart.vue
import MixChart from "@/views/sku/Chart/MixChart.vue";
import MinChart from "@/views/sku/Charts/MinChart.vue";
// import headTop from "../components/headTop";
// import tendency from "../components/tendency";
// import dtime from "time-formater";
// import {
//   userCount,
//   orderCount,
//   getUserCount,
//   getOrderCount,
//   adminDayCount,
//   adminCount,
// } from "@/api/getData";
export default {
  components: {
    PanelGroup,

    // skc
    MixChart,

    // sku
    MinChart,
    //曲线分析
    chartData,
    chartDataI,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    date,
    // headTop,
    // tendency,
  },
  data() {
    return {
      open: false,

      //传递数据
      echartDataI: {
        columns: ["支付日期", "销售金额", "退款金额", "净销售额"],
        rows: [],
      },
      //纵向滚动条
      tableHeight: "",
      //skc列表
      skcitemData: [],
      //sku列表
      skuitemData: [],
      //总览数据
      itemData: {},
      //锚点
      sections: document.querySelectorAll("section"),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      timeGap: { startTime: "", endTime: "" },

      highlighted: ["销售金额", "退款金额", "净销售额"], // 初始化时，前两个元素高亮

      // 店铺
      cascadeList: [],
      //, "天猫", "vfu运动旗舰店"
      value: ["VFU"],
      loading: false,
      productNo: "",
      options: [], // 选项，从后端传递过来
      userCount: 3,
      orderCount: 0,
      adminCount: 15,
      allUserCount: 72713,
      allOrderCount: 33977,
      allAdminCount: 133145,
      sevenDay: [],
      sevenDate: [[], [], []],
      pageHeight: window.innerHeight - 580,
      channelSaleTopList: [],
      timeObj: {},
      echartData: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      echartDataMin: {
        // order: {
        xData: [],
        female: [],
        male: [],
        average: [],
      },
      pjtUrl: process.env.VUE_APP_BASE_API,
    };
  },

  // mounted(){
  // 	this.initData();
  // 	for (let i = 6; i > -1; i--) {
  // 		const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
  // 		this.sevenDay.push(date)
  // 	}
  // 	this.getSevenData();
  // },
  computed: {},
  created() {
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();

    var timeGap = JSON.parse(localStorage.getItem("objGap"));
    if (timeGap) {
      this.valueTime = new Date(timeGap.startTime);
      this.groupType = timeGap.dateType;
      (this.timeObj.startTime = new Date(timeGap.startTime)),
        (this.timeObj.endTime = new Date(timeGap.endTime)),
        (this.productNo = timeGap.itemOne);
      this.value = timeGap.value;
      this.getitemSaleData(timeGap);
      this.getskcData(timeGap);
      this.selectItemStatisticsEcharts(timeGap);
      // this.getskuBySkcSaleList(timeGap);
    }
    if (this.$route.query.obj) {
      // let obj = JSON.parse(obj);
      let obj = this.$route.query.obj;
      console.log(JSON.stringify(obj, null, 4));
      this.getitemSaleData(obj);
      this.getskcData(obj);
      // this.value = obj.salesGrade;
      this.productNo = obj.itemOne;
      // this.timeObj = obj.timeObj;
      this.groupType = obj.dateType;
      // this.valueTime = obj.valueTime;
      // this.valueTime = obj.valueTime;
      // this.$route.query.obj = {};
    }

    // this.openLoading();

    // const xData = (function () {
    //   const data = [];
    //   for (let i = 1; i < 13; i++) {
    //     // + "month"
    //     data.push(i);
    //   }
    //   return data;
    // })();
    // this.echartData.xData = xData;
    // this.echartData.female = [
    //   709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078,
    // ];
    // this.echartData.male = [
    //   327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220,
    // ];
    // this.echartData.average = [
    //   1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298,
    // ];

    // this.echartDataMix = this.echartData;
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
  },
  //记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed() {
    // localStorage.removeItem("objGap");
    window.onresize = null;
  },
  methods: {
    //
    async initData() {
      const today = dtime().format("YYYY-MM-DD");
      Promise.all([
        userCount(today),
        orderCount(today),
        adminDayCount(today),
        getUserCount(),
        getOrderCount(),
        adminCount(),
      ])
        .then((res) => {
          this.userCount = res[0].count;
          this.orderCount = res[1].count;
          this.adminCount = res[2].count;
          this.allUserCount = res[3].count;
          this.allOrderCount = res[4].count;
          this.allAdminCount = res[5].count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getSevenData() {
      const apiArr = [[], [], []];
      this.sevenDay.forEach((item) => {
        apiArr[0].push(userCount(item));
        apiArr[1].push(orderCount(item));
        apiArr[2].push(adminDayCount(item));
      });
      const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]];
      Promise.all(promiseArr)
        .then((res) => {
          const resArr = [[], [], []];
          res.forEach((item, index) => {
            if (item.status == 1) {
              resArr[Math.floor(index / 7)].push(item.count);
            }
          });
          this.sevenDate = resArr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /* 获取货号列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      // this.loading = true;
      // return
      queryContentByKey({ keyWord: key }).then((res) => {
        // this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
      });
    },

    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response);
        this.cascadeList = result;
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index;
      if (target) {
        this.$nextTick(() => {
          target.scrollIntoView({ behavior: "smooth" });
          this.activeSection = target;
        });
      }
    },
    //锚点
    startScrollTimer() {
      this.scrollTimer = setInterval(() => {
        const currentSection = document.querySelector("section[data-active]");
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态
      return this.active === sectionId;
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
    //skc图表点击
    SetLineChartData(index) {
      console.log(index);
      this.skcitemData.forEach((item) => {
        if (index == item.id) {
          let obj = {
            salesGrade: this.value.join(","),
            ...this.timeObj,
            // item: this.productView,
            skcOne: item.skc,
          };
          this.getskuBySkcSaleList(obj);
        }
      });
    },
    //指标点击回传
    handleSetLineChartData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素
      this.highlighted.shift();
      // // 添加新的高亮元素
      this.highlighted.push(type);

      console.log(JSON.stringify(this.highlighted));
      var arr = ["支付日期"];
      let array = arr.concat(this.highlighted);
      // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // var array = ["支付日期", "退款金额", "净销售额", "毛利率"];
      var rateItem;

      // 遍历数组，找到包含'率'字的元素
      for (var i = 0; i < array.length; i++) {
        if (array[i].includes("率")) {
          rateItem = array[i];
          break;
        }
      }

      // 如果找到了包含'率'字的元素，将其移到数组最后
      if (rateItem) {
        var index = array.indexOf(rateItem);
        if (index !== array.length - 1) {
          array.splice(index, 1);
          array.push(rateItem);
        }
      }

      console.log(array);
      this.echartDataI.columns = array;
      // let temp = arr.concat(this.highlighted);
      // // let temp = arr.push(type)
      // console.log(JSON.stringify(temp));
      // this.echartDataI.columns = temp;
      // const obj = {
      //   newVisitis: [130, 140, 141, 142, 145, 150, 160],
      //   messages: [120, 82, 91, 154, 162, 140, 145],
      //   purchases: [80, 100, 121, 104, 105, 90, 100],
      //   shoppings: [180, 160, 151, 106, 145, 150, 130]
      // }
      // this.echartData.columns = ['日期', '访问用户']
      // this.echartData.rows = [
      //   { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //   { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //   { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //   { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //   { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //   { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      // ]
      // this.lineChartData = lineChartData[type]
      // this.lineChartData = obj
    },
    testAdd(key) {
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      console.log(JSON.stringify(obj));
      if (!obj.endTime) {
        return;
      } else {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      console.log(JSON.stringify(obj));
      if (!obj.endTime || !this.productNo) {
        return;
      } else {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      console.log(this.valueTime);
      // TODO
      this.timeObj = timeObj;
      console.log(JSON.stringify(this.timeObj));
      let obj = {
        salesGrade: this.value.join(","),
        ...timeObj,
        itemOne: this.productNo,
      };

      console.log(JSON.stringify(obj));

      if (!obj.endTime || this.$route.query.obj || !this.productNo) {
        return;
      } else {
        this.getitemSaleData(obj);
        this.getskcData(obj);
        this.selectItemStatisticsEcharts(obj);
      }
    },
    tableEdit(row, column, cell, event) {
      console.log(JSON.stringify(row));
      // console.log(JSON.stringify(column.property));
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        // item: this.productView,
        skcOne: row.skc,
      };
      this.getskuBySkcSaleList(obj);
    },
    //sku列表
    getskuBySkcSaleList(obj) {
      skuBySkcSaleList(obj).then((response) => {
        console.log(JSON.stringify(response));
        if (response) {
          this.skuitemData = response;

          this.echartDataMin.xData = response.map((item) => item.proSize);
          //库存
          this.echartDataMin.female = response.map(
            (item) => item.endingInventory
          );
          //在途库存
          this.echartDataMin.male = response.map(
            (item) => item.salesGrossProfit
          );
          //销量
          this.echartDataMin.average = response.map(
            (item) => item.netSalesNumber
          );
        } else {
          this.skuitemData = [];
          this.echartDataMin = {};
        }
      });
    },

    //查看完整数据
    selectAll() {
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      this.getskcData(obj);
      this.open = true;
    },
    handleClose() {
      this.open = false;
      let obj = {
        salesGrade: this.value.join(","),
        ...this.timeObj,
        itemOne: this.productNo,
      };
      this.getskcData(obj);
    },
    //skc列表
    getskcData(obj) {
      skcByItemSaleList(obj).then((response) => {
        if (response) {
          response.forEach((item, index) => {
            item.id = index;
          });
          console.log(JSON.stringify(response));
          this.skcitemData = response;
          this.tableEdit(response[0]);
          //skc曲线分析x轴
          if (this.open) {
            this.echartData.xData = response.map(
              (item) => item.spu + "\n" + item.colorProperty
            );
          } else {
            this.echartData.xData = response
              .slice(0, 10)
              .map((item) => item.colorProperty);
          }
          //库存
          this.echartData.female = response.map((item) => item.endingInventory);
          //在途库存
          this.echartData.male = response.map((item) => item.salesGrossProfit);
          //销量
          this.echartData.average = response.map((item) => item.netSalesNumber);
          console.log(JSON.stringify(this.echartData));
        } else {
          //skc
          // this.skcitemData = [];
          // this.echartData = {};
          //sku
          // this.skuitemData = [];
          // this.echartDataMin = {};
        }
      });
    },
    //获取总览数据
    getitemSaleData(obj) {
      itemSaleData(obj).then((response) => {
        console.log(JSON.stringify(response));
        this.itemData = response ? response : {};
        // if (response) {
        //   this.itemData = response;
        // }
      });
    },
    //曲线分析
    selectItemStatisticsEcharts(obj) {
      selectItemStatistics(obj).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.payDateUnit,
            销售金额: item.salesAmount,
            退款金额: item.returnAmount,
            净销售额: item.netSalesAmount,
            总销售件数: item.totalSalesNumber,
            净销售件数: item.netSalesNumber,
            发货前退货数: item.returnBeforeShipmentNumber,
            发货后退货数: item.returnAfterShipmentNumber,
            总退货件数: item.totalReturnNumber,
            综合退货率: item.comprehensiveReturnRate,
            毛利额: item.grossProfit,
            毛利率: item.grossProfitRate,
            净销售额: item.netSalesAmount,
            库存: item.endingInventory,
            售罄率: item.exhaustionRate,
            SD单件数: item.sdNumber,
            MJX单件数: item.mjxNumber,
            可售天数: item.saleDays,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载商品排行数据，请稍候！");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}
/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}
.chart-container {
  position: relative;
  width: 100%;
  height: 380px;
}
// @import '../style/mixin';
.data_section {
  padding: 20px;
  margin-bottom: 10px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    // padding: 10px 10px;
    margin-bottom: 20px;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  // .all_head {
  //   background: #20a0ff;
  // }
}
.dashboard-editor-container {
  // padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
//    .wan{
//        .sc(16px, #333)
//    }
</style>
